<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>跑团标签</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
    		#main {
    			height: 100%;
    			background-color: #FFFFFF;
    		}
    		.register-tags {
    			padding-left: 20px;
    			padding-right: 20px;
    			text-align: center;
    		}
    		.register-tags-title {
    			margin-top: 40px;
    			color: #202020;
    			font-size: 17px;
    			margin-bottom: 25px;
    		}
    		.register-tags-tip {
    			font-size: 14px;
    			color: #8e8e8e;
    			margin-top: 10px;
    		}
    		
    		
    		.register-tags-block {
    			margin-bottom: 30px;
    		}
    		.block-title {
    			color: #333333;
    			font-size: 16px;
    			text-align: left;
    			margin-bottom: 15px;
    		}
    		
    		.interest {
    			overflow: visible;
        }
        .interest li{
            float: left; 
            width: 25%; 
            padding: 0 6px 10px; 
            font-size: 12px;
            color: #8e8e8e;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .interest li div{
            border: 1px solid #ebebeb; border-radius: 16px; padding: 8px;
            position: relative;
        }
        .interest li .sel{
            display: none; position: absolute; left: 0; top: -6px;
            width: 20px; height: 20px;
            background:url(../../image/ug_check.png) no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
        }
        .interest li.selected .sel{
            display: inline-block;
        }
        .interest li.selected div{
            border-color: #e23c38;
        }
        
        
        .register-tags-btn {
        		background-color: #FC8719;
         	width: 100%;
         	height: 42px;
         	line-height: 42px;
         	border-radius: 3px;
         	-webkit-border-radius: 3px;
         	text-align: center;
         	color: #FFFFFF;
         	font-size: 16px;
         	margin-top: 40px;
        }
    </style>
</head>

<body>
		
	<div id="wrap">
    
        <div id="main">
        
    				<div class="register-tags">
    				
    					<div class="register-tags-title">请选择跑团所属标签</div>
    				
    					<div class="register-tags-block">
    						
    						<div class="block-title">常见商圈（一个）</div>
    						<ul class="interest">
    							
    							<li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>罗湖口岸</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>会展中心</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>华侨城</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>华强北</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>东门</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>科技园</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>宝安中心</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>海岸城</div>
					        </li>
    							
    						</ul>
    						
    					</div>
    				
    				
    					<div class="register-tags-block">
    						
    						<div class="block-title">所处行业（一个）</div>
    						<ul class="interest">
    							
    							<li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>法律</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>金融</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>互联网</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>教育</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>体育</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>房地产</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>艺术</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>其他</div>
					        </li>
    							
    						</ul>
    						
    					</div>
    				
    					<div class="register-tags-block">
    						
    						<div class="block-title">兴趣爱好（多个）</div>
    						<ul class="interest">
    							
    							<li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>跑步</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>钓鱼</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>球类</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>摄影</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>k歌</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>动漫</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>桌游</div>
					        </li>
					        
					        <li tapmode onclick="multiSel(this)">
					            <div><i class="sel"></i>网游</div>
					        </li>
    							
    						</ul>
    						
    					</div>
    				
    					<div class="clear"></div>
    					<div class="register-tags-btn" onclick="clickNext()">填写跑团资料</div>
    				</div>
    			
    		</div>
        
	</div>
			
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript">
	apiready = function(){
		
	};
	
	function multiSel(it){
        var $this = $(it);
        if($this.hasClass('selected')){
            $this.removeClass('selected');
        }else{
            $this.addClass('selected');
        }
    }
    
    function clickNext() {
    		api.openWin({
	        name: 'group-create',
	        url: '../group-create/group-create.html'
	    });
    }
	
</script>
</html>